var Bolg = {
 
};
var Show = {
	show: function() {
		var spot = $("#spot>li");
		var print = $(".container-show-box>img");
		var showBox = $(".container-show");
		var box = $(".container-show-box");
		var pageWrappwr = $("container-page-wrapper");
		var n = 1;
		detection();
		var aa = setInterval (switchs, 4000);
		spot.click(function (){
			clearInterval(aa);
			spot.removeClass("on");
			$(this).addClass("on");
			n=$(this).index(); 
			switchs();
			aa=setInterval(switchs , 4000);
		});
		function switchs() {
			for(var i = 0; i < spot.length; i++) {
				n === i ? spot.eq(i).addClass("on") : spot.eq(i).removeClass("on");
			}
			for(var j = 0; j < print.length; j++) {
				n === j ? print.eq(j).fadeIn(800) : print.eq(j).fadeOut(800);
			}
			n++;
			if(n > 3) {
				n = 0;
			}
		}
		function detection() {
			var winWidth = $(window).innerWidth();
			if(winWidth <= 768) {
				if(winWidth <=768 && winWidth > 750) {
					showBox.width(winWidth - (winWidth -750));
					box.width(winWidth * 4);
					box.css({
						"height": "auto"
					});
					print.width(winWidth);
				} else {
					showBox.width(winWidth-30);
					box.width(winWidth * 4-30);
					box.css({
						"height": "auto"
					});
					print.width(winWidth-30);
				}

			} else if(winWidth > 768 && winWidth <= 1024){
				showBox.width(750);
				box.width(3000).height(400);
				print.width(750);
				
			} else if(winWidth > 1024 && winWidth < 1250) {
				showBox.width(winWidth - 520);
				box.width(winWidth * 4 - 520);
				box.css({
					"height": "auto"
				});
				print.width(winWidth - 520);
			} else if(winWidth >= 1250) {
				showBox.width(750);
				box.width(3000).height(400);
				print.width(750);
			}
		}
		$(window).resize(function() {
			detection();
		});
	}
};